<html>
<head>
	<style>
		div.images {
			margin: auto;
			text-align: center;			
		}
		
		div.images img {
			margin: 32px;		
			border: 1px solid blue;
		}
	</style>
	
	<script language="javascript" src="js/jquery.min.js"></script>
	<script language="javascript" src="js/ui/ui.core.js"></script>
	<script language="javascript" src="js/ui/ui.resizable.js"></script>	

	<script language="javascript" src="js/jquery.mousewheel.min.js"></script>
	<script language="javascript" src="js/jquery.imgareaselect.min.js"></script>
	
	<script language="javascript" src="../js/on/jquery.onviewport.js"></script>
	<script language="javascript" src="../js/on/jquery.onimage.tools.js"></script>
	<script language="javascript" src="../js/on/jquery.onimage.js"></script>	
	
	<link rel="stylesheet" href="css/imgareaselect/imgareaselect-animated.css"/>
	<link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.7.2.custom.css"/>	
	<link rel="stylesheet" href="../css/onimage/jquery.onimage.css"/>	

</head>

<body>
	<div class="images">
		<img id="image1" src="img/image1.jpg" width="300" height="300"/>	
		<img id="image2" src="img/image2.jpg" width="300" height="300"/>	
		<img id="image3" src="img/image3.jpg" width="300" height="300"/>
	</div>
	
	<script>
		$('#image1,#image2,#image3').onImage();		
	</script>
</body>
</html>